<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>{$config.web_name}</title>
</head>
<style type="text/css">
	body{
		 background: #130454 url('/static/image/bg.png') no-repeat;
		 background-size: 100% 100vh;
	}

	.loginView{
		position: fixed;
		z-index: 1;
		right: 205px;
		top: 200px;
		background: url('/static/image/login.png') no-repeat;
		width: 500px;
		height: 518px;
	}

	.loginView p{
		color: #fff;
		font-size: 38px;
		margin: 50px 0;
		text-align: center;
	}

	.inputItem{
		width: 400px;
		height: 55px;
		border:1px solid #0e3d6f;
		border-radius: 6px;
		margin: 0 auto;
		display: flex;
	}

	.inputItem:hover{
		border-color: #0d8ec2;
	}

	.inputItem img{
		width: 24px;
		height: 26px;
		padding: 14px;
	}

	.inputItem input{
		width: 100%;
		border: 0;
		background-color: #00000000;
		outline: none;
		font-size: 20px;
    	color: #fff;
	}

	.inputItem input::placeholder {
    	color: #fff;
	}


	.inpCode{
		width: 400px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 auto;
	}

	.authView{
		width:264px;
		margin-right: 22px;
	}

	.m35{
		margin-bottom: 35px;
	}

	.submit{
		width: 400px;
		height: 56px;
		line-height: 56px;
		background: linear-gradient(to bottom, #00b8ff, #0179e5);
		border-radius: 10px;
		margin: 0 auto;
		text-align: center;
		color: #fff;
		font-size: 26px;
		cursor: pointer;
	}
	
	.logo{
	    display: flex;
	    margin-top: 65px;
	    margin-left: 82px;
	}
	
	.logo img{
	    width: 58px;
	    height: 58px;
	}
	
	.logo .title{
	    border-left: 2px solid #fff;
	    margin-left: 30px;
	    padding-left: 30px;
	}
	
	.logo .title p{
	    margin: 0;
	    font-size: 28px;
	    line-height: 30px;
	    color:#fff;
	}
	
	.des{
	    margin-top: 26vh;
	    margin-left: 12%;
	}
	
	.des img{
	    width: 680px;
	}
</style>
<body>
<form id="loginForm">
    <!--<div class="logo">-->
    <!--    <img src="/static/image/logo.png" />-->
    <!--    <div class="title">-->
    <!--        <p>中国平煤神马控股集团有限公司</p>-->
    <!--        <p>机电设备维修分公司</p>-->
    <!--    </div>-->
    <!--</div>-->
    <div class="des">
        <img src="/static/image/des.png" />
    </div>
	<div class="loginView" id="app">
		<p>账户登录</p>
		<div class="inputItem m35">
			<img src="/static/image/user.png">
			<input type="text" placeholder="用户名" name="user_name" >
		</div>
		<div class="inputItem m35">
			<img src="/static/image/password.png">
			<input type="password" placeholder="密码" name="pass_word">
		</div>
		<div class="inpCode m35">
			<div class="inputItem authView">
				<img src="/static/image/auth.png">
				<input type="text" placeholder="验证码" maxlength="4" name="code">
			</div>
			<img src="{:captcha_src()}" id="LAY-user-get-vercode" alt="" onclick="this.src='{:captcha_src()}?'+Math.random();">
		</div>
		<div class="submit" id="submit" @click="submit">登 录</div>
	</div>
</form>
	
	<link rel="stylesheet" href="/static/elementUi/elementui@2.15.6.index.css" />
	<!-- 导入 Vue 3 -->
	<script src="/static/elementUi/vue@2.6.14.js"></script>
	<!-- 导入组件库 -->
	<script src="/static/elementUi/element.2.15.6.index.js"></script>
	<script src="/static/global/js/jquery.min.js"></script>
	<script src="/static/elementUi/component/mixin.js"></script>

	<script>
		// 回车提交
		$("body").keydown(function (e) {
			if (e.keyCode == "13") {
				$("#submit").trigger('click');
			}
		})
	</script>
	
	<script>
		new Vue({
			el:"#app",
			data:function (){
				return {
				
				}
			},
			methods:{
				submit:function() {
					const load = this.showLoad();
					var that = this;
					$.ajax({
						url: '{:url("Login/index")}'
						, type: 'POST'
						, dataType: 'JSON'
						, data: $("#loginForm").serialize()
						, success: function (res) {
							if (res.code == 1) {
								that.$message({
									message: '登录成功',
									type:'success'
								})
								$.ajax({
									url:'/admin/admin/getUserAuth',
									dataType:'json',
									async:false,
									success:function (res) {
										if (res.code === 1) {
											sessionStorage.setItem('ht_admin_rule',res.data.auth)
										}
									}
								})
								setTimeout(function (){
									location.href = "{:url('Index/index')}"
								},1000)
								
							} else {
								that.$message.error(res.msg)
								$("#LAY-user-get-vercode").attr('src', '{:captcha_src()}?' + Math.random())
							}
						}
						, complete: function () {
							load.close();
						}
					})
				}
			}
		})
	</script>
</body>
</html>